<template>
  <el-dialog v-model="dialogFormVisible" title='申请出库' width="600px" align-center draggable>
    <div class="product-name">您申请出库的产品是:&nbsp;&nbsp;{{formData.product_name}}</div>
    <div class="product-name">该产品的库存还有:&nbsp;&nbsp;{{formData.product_in_warehouse_number}}</div>
    <div class="dialog-content">
      <el-form ref="ruleFormRef" :model="formData" :label-position="labelPosition" :rules="rules" label-width="120px">
        <el-form-item label="申请出库编号" prop="product_out_id">
          <el-input v-model="formData.product_out_id" />
        </el-form-item>
        <el-form-item label="出库数量" prop="product_out_number">
          <el-input v-model="formData.product_out_number" />
        </el-form-item>
        <el-form-item label="出库申请人" prop="product_out_apply_person">
          <el-input v-model="formData.product_out_apply_person" disabled/>
        </el-form-item>
        <el-form-item label="产品单价" prop="product_single_price">
          <el-input v-model="formData.product_single_price" disabled/>
        </el-form-item>
        <el-form-item label="申请出库备注" prop="apply_memo">
          <el-input v-model="formData.apply_memo" :rows="2" type="textarea" />
        </el-form-item>
      </el-form>
    </div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="applyProduct" :disabled='formData.product_in_warehouse_number<formData.product_out_number'>确定</el-button>
			</span>
		</template>
  </el-dialog>
</template>
 
<script setup lang="ts">
  import { reactive, ref, onBeforeUnmount } from 'vue';
  import { ElMessage } from 'element-plus';
  import { applyOutProduct } from '@/api/product';
  import { bus } from "@/utils/mitt.js";

  const labelPosition = ref('left')

  bus.on('applyId', (row : any) => {
		formData.id = row.id
		formData.product_in_warehouse_number = row.product_in_warehouse_number
		formData.product_name = row.product_name
		formData.product_single_price = row.product_single_price
		formData.product_out_number = null
		formData.product_out_id = null
	})

  interface FormData {
		id : number,
		product_name: string,
		product_out_id : number,
    product_in_warehouse_number : number,
		product_single_price:number,
		product_out_number : number,
		product_out_apply_person : string,
		apply_memo : string,
	}

	const formData : FormData = reactive({
		id: null,
		product_name: null,
		product_out_id: null,
    product_in_warehouse_number: null,
		product_single_price: null,
		product_out_number: null,
		product_out_apply_person: localStorage.getItem('name'),
		apply_memo: ''
	})

	const rules = reactive({
		product_out_id: [
			{ required: true, message: '请输入申请出库编号', trigger: 'blur' },
		],
		product_out_number: [
			{ required: true, message: '请输入申请出库数量', trigger: 'blur' },
		],
		product_out_apply_person: [
			{ required: true, message: '请输入申请人', trigger: 'blur' },
		],
	})

	const emit = defineEmits(['success'])

	// 产品出库
	const applyProduct = async () => {
		const res = await applyOutProduct(formData)
		if (res.data.status == 0) {
			ElMessage({
				message: '产品申请出库成功',
				type: 'success',
			})
			emit('success')
			dialogFormVisible.value = false
		} else {
			ElMessage.error('产品申请出库失败')
			dialogFormVisible.value = false
		}
	}
  
  // ------------------------------------------------------------------------------弹窗开关
	const dialogFormVisible = ref(false)
  // 打开创建管理员的弹窗
  const open = () => {
    dialogFormVisible.value = true
  }
  defineExpose({
    open
  })
	onBeforeUnmount(() => {
		bus.all.clear()
	})
</script>
 
<style lang="scss" scoped>
	.dialog-content {
		display: flex;
		padding: 0 30px 20px 30px;
	}

	.product-name {
		display: flex;
		justify-content: center;
		font-size: 16px;
		margin: 10px;
		color: #333;
	}

	:deep(.el-form-item) {
		margin: 30px;
	}
</style>
